<template>
  <div>
    <p style="font-size:25px;margin-right:50px">报修位置列表</p>
    <el-table
      v-loading="loading"
      :data="placeData"
      style="width: 50%;margin-bottom: 20px;"
      row-key="id"
      border
      :tree-props="defaultProps"
    >
      <el-table-column prop="name" label="名称" width="300px"></el-table-column>
      <el-table-column label="操作" header-align="center" align="center">
        <template slot="header">
          <strong>操作</strong>
          <el-button
            style="margin-left:50px"
            plain
            size="mini"
            type="primary"
            @click="showAddDialog"
          >增加</el-button>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index,scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改位置名称" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="alterPlace">
        <el-form-item label="位置名称" label-width="100px">
          <el-input v-model="alterPlace.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="增加报修位置" :visible.sync="dialogAddPlaceVisible" width="30%">
      <el-form :model="place">
        <el-form-item label="位置名称" label-width="100px">
          <el-input v-model="place.name" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="是否顶级父类" label-width="100px">
          <el-switch v-model="isFather" active-text="非顶级父类" inactive-text="顶级父类"></el-switch>
        </el-form-item>
        <el-form-item label="位置父类" label-width="100px" v-if="isFather">
          <el-cascader
            v-model="parentIds"
            clearable
            :options="placeData"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogAddPlaceVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      placeData: [],
      defaultProps: {
        children: "sonPlace",
        label: "name",
        value: "id",
        checkStrictly: true,
      },
      loading: true,
      place: {
        id: "",
        name: "",
        parentId: "",
      },
      alterPlace: {
        id: "",
        name: "",
        parentId: "",
      },
      dialogFormVisible: false,
      alterIndex: "",
      dialogAddPlaceVisible: false,
      isFather: false,
      parentIds: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      this.$axios.post("/bx/place/list").then((r) => {
        let placeList = JSON.parse(r.data.data);
        let data = [];
        for (let p of placeList) {
          if (p.parentId == 0) {
            data.push(p);
          }
        }
        this.wrapData(data, placeList);
        for (let p of data) {
          this.alterPlaceData(p);
        }
        this.loading = false;
        this.placeData = data;
        console.log(this.placeData);
      });
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.alterPlace = row;
      this.alterIndex = index;
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该位置, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("adfadf");
          let array = [];
          array.push(row.id);
          this.parsePlace(array, row);
          console.log(array);
          this.$axios.post("/bx/place/delete", array).then((r) => {
            if (r.data.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submit() {
      this.$axios.post("/bx/place/update", this.alterPlace).then((r) => {
        if (r.data.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.dialogFormVisible = false;
        }
      });
    },
    parsePlace(array, place) {
      if (place.sonPlace == undefined) {
        return;
      }
      for (const sonPlace of place.sonPlace) {
        array.push(sonPlace.id);
        this.parsePlace(array, sonPlace);
      }
    },
    add() {
      if (!this.isFather) {
        this.place.parentId = 0;
        this.$axios.post("/bx/place/add", this.place).then((r) => {
          if (r.data.code == 200) {
            this.$message({
              message: "增加成功",
              type: "success",
            });
            this.dialogAddPlaceVisible = false;
            this.getData();
          }
        });
      } else {
        this.$axios.post("/bx/place/add", this.place).then((r) => {
          if (r.data.code == 200) {
            this.$message({
              message: "增加成功",
              type: "success",
            });
            this.dialogAddPlaceVisible = false;
            this.getData();
          }
        });
      }
      this.place = {
        id: "",
        name: "",
        parentId: "",
      };
      this.isFather = false;
    },
    alterPlaceData(place) {
      if (place.sonPlace.length == 0) {
        place.sonPlace = undefined;
        return;
      }
      for (const p of place.sonPlace) {
        this.alterPlaceData(p);
      }
    },
    handleChange(value) {
      this.place.parentId = value[value.length - 1];
    },
    showAddDialog() {
      this.dialogAddPlaceVisible = true;
      this.place.name = "";
    },
    wrapData(data, placeList) {
      for (const place of data) {
        let sonPlace = [];
        for (const p of placeList) {
          if (p.parentId == place.id) {
            sonPlace.push(p);
          }
        }
        this.wrapData(sonPlace, placeList);
        place.sonPlace = sonPlace;
      }
    },
  },
};
</script>
